import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { toast } from 'sonner';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/contexts/LanguageContext';
import { useCart } from '@/contexts/CartContext';
import { getImageUrl } from '@/lib/utils';

import { products as mockProducts } from '@/lib/mockData';

// 扩展商品数据，包含更多详情信息
const products = [
  {
    ...mockProducts.find(p => p.id === 1),
    detailedDescriptionKey: "detailedProduct1Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Stainless%20Steel%20Screwdriver%20Set%20Closeup&sign=d8dad1c792e9cf9d375ad943b7066c6f",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Screwdriver%20Set%20in%20Case&sign=b86d3a43733e0ede58e9f55c643566d9",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Magnetic%20Screwdriver%20Tips&sign=017818ee1412f7248431bf3a2ad511cf",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Screwdriver%20Set%20Usage&sign=273a333dcbfb0f3ff35a0852df07cd50"
    ],
    features: [
      { key: "feature1", valueKey: "feature1Value" },
      { key: "feature2", valueKey: "feature2Value" },
      { key: "feature3", valueKey: "feature3Value" },
      { key: "feature4", valueKey: "feature4Value" }
    ],
    rating: 4.8,
    reviewCount: 127
  },
  {
    ...mockProducts.find(p => p.id === 2),
    detailedDescriptionKey: "detailedProduct2Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Cordless%20Power%20Drill%20Closeup&sign=50aa4a7b61071e1396d9151ca8974517",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Power%20Drill%20with%20Battery&sign=4b15ca73c93d78d8d3443cca6169d395",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Drill%20Bits%20Set&sign=b48a1a249e6ef3e996416f3aebfcd667",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Power%20Drill&sign=5eea98ff6dce3044b12b94668723e275"
    ],
    features: [
      { key: "feature5", valueKey: "feature5Value" },
      { key: "feature6", valueKey: "feature6Value" },
      { key: "feature7", valueKey: "feature7Value" },
      { key: "feature8", valueKey: "feature8Value" }
    ],
    rating: 4.6,
    reviewCount: 93
  },
  {
    ...mockProducts.find(p => p.id === 3),
    detailedDescriptionKey: "detailedProduct3Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=3m%20Measuring%20Tape&sign=2fc0849b19a3b43dcccb6d26ce73d937",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=5m%20Measuring%20Tape&sign=738b85e991953258d756eb81621f7cf8",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=8m%20Measuring%20Tape&sign=2f15890e2fe17e4df26e1102f8ba1ce1",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Measuring%20Tape&sign=a9bced8700a9e32289846a85dea63aca"
    ],
    features: [
      { key: "feature9", valueKey: "feature9Value" },
      { key: "feature10", valueKey: "feature10Value" },
      { key: "feature11", valueKey: "feature11Value" },
      { key: "feature12", valueKey: "feature12Value" }
    ],
    rating: 4.7,
    reviewCount: 156
  },
  {
    ...mockProducts.find(p => p.id === 4),
    detailedDescriptionKey: "detailedProduct4Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Adjustable%20Wrench%20Set&sign=8c20e6afd5c85cda205fb078be6c2c4c",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Chrome%20Wrench%20Set&sign=c11f9b1a48aaac320891049c146efe8c",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Wrench%20Set%20in%20Case&sign=8e94a98cf756e9ca3bf48af18449407f",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Wrench%20on%20Nut&sign=eae0e0dee6ca0f030397dedb36ff3717"
    ],
    features: [
      { key: "feature13", valueKey: "feature13Value" },
      { key: "feature14", valueKey: "feature14Value" },
      { key: "feature15", valueKey: "feature15Value" },
      { key: "feature16", valueKey: "feature16Value" }
    ],
    rating: 4.9,
    reviewCount: 87
  },
  {
    ...mockProducts.find(p => p.id === 5),
    detailedDescriptionKey: "detailedProduct5Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Socket%20Wrench%20Set%20Closeup&sign=618049b92bbe186bc90ac89f6fcdd3d4",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Ratchet%20Handle%20Detail&sign=4c5336a5c8cd2c2ef62d8e7774b5d7bd",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Socket%20Set%20Organization&sign=27b12b7466a8839a157ade5798f92cf1",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Socket%20Wrench&sign=92732cfab056187d01ac54ef0239a179"
    ],
    features: [
      { key: "feature17", valueKey: "feature17Value" },
      { key: "feature18", valueKey: "feature18Value" },
      { key: "feature19", valueKey: "feature19Value" },
      { key: "feature20", valueKey: "feature20Value" }
    ],
    rating: 4.8,
    reviewCount: 103
  },
  {
    ...mockProducts.find(p => p.id === 6),
    detailedDescriptionKey: "detailedProduct6Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Hammer%20Set%20Closeup&sign=ba76bc36e91642b8e602eb0b81935497",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Claw%20Hammer%20Detail&sign=958c3ccc922c7bd40d76c6e02d977c99",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Ball%20Peen%20Hammer%20Detail&sign=40fb48099bbdf1f22ca57946a7d886d0",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Claw%20Hammer&sign=812c90fc0ce037512fc74984e8c74cac"
    ],
    features: [
      { key: "feature21", valueKey: "feature21Value" },
      { key: "feature22", valueKey: "feature22Value" },
      { key: "feature23", valueKey: "feature23Value" },
      { key: "feature24", valueKey: "feature24Value" }
    ],
    rating: 4.7,
    reviewCount: 89
  },
  {
    ...mockProducts.find(p => p.id === 7),
    detailedDescriptionKey: "detailedProduct7Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Digital%20Level%20Tool%20Closeup&sign=f32c63d443c897f4868dfd139eae42e5",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Level%20Tool%20Magnetic%20Strip&sign=f1009144fd439951a386baabc984a363",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Digital%20Level%20Display&sign=a1b172b4ee9cf19a683735ecb0916c99",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Level%20Tool%20on%20Wall&sign=98db7d67125cda9917fcac64faf699d7"
    ],
    features: [
      { key: "feature25", valueKey: "feature25Value" },
      { key: "feature26", valueKey: "feature26Value" },
      { key: "feature27", valueKey: "feature27Value" },
      { key: "feature28", valueKey: "feature28Value" }
    ],
    rating: 4.6,
    reviewCount: 76
  },
  {
    ...mockProducts.find(p => p.id === 8),
    detailedDescriptionKey: "detailedProduct8Desc",
    images: [
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Pliers%20Set%20Closeup&sign=e6aca2e2eb5859f478300aae449d69b1",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Combination%20Pliers%20Detail&sign=5f4d53ddcb405e4199328f85325c7098",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Long%20Nose%20Pliers%20Detail&sign=28e02115e0d90b341f488b593e040c50",
     "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Using%20Diagonal%20Cutting%20Pliers&sign=add3caa11b93ea31e7d912b810ddbae1"
    ],
    features: [
      { key: "feature29", valueKey: "feature29Value" },
      { key: "feature30", valueKey: "feature30Value" },
      { key: "feature31", valueKey: "feature31Value" },
      { key: "feature32", valueKey: "feature32Value" }
    ],
    rating: 4.9,
    reviewCount: 112
  }
];



export default function ProductDetail() {
  const [activeTab, setActiveTab] = useState('description');
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { t } = useLanguage();
  const [product, setProduct] = useState<any>(null);
  const [selectedImage, setSelectedImage] = useState<string>("");
  const [quantity, setQuantity] = useState<number>(1);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({});

  // Calculate adjusted price based on selected attributes
  const getAdjustedPrice = () => {
    if (!product || !product.attributes) return product.price;
    
    let adjustedPrice = product.price;
    
    product.attributes.forEach((attributeGroup: any) => {
      if (selectedAttributes[attributeGroup.nameKey]) {
        const selectedOption = attributeGroup.options.find(
          (option: any) => option.value === selectedAttributes[attributeGroup.nameKey]
        );
        if (selectedOption) {
          adjustedPrice += selectedOption.priceAdjustment;
        }
      }
    });
    
    return adjustedPrice;
  };

  useEffect(() => {
    // 模拟API请求延迟
    const timer = setTimeout(() => {
      const foundProduct = products.find(p => p.id === Number(id));
      if (foundProduct) {
        // Set default attributes if available
        const defaultAttributes: Record<string, string> = {};
        if (foundProduct.attributes) {
          foundProduct.attributes.forEach((attributeGroup: any) => {
            if (attributeGroup.options && attributeGroup.options.length > 0) {
              defaultAttributes[attributeGroup.nameKey] = attributeGroup.options[0].value;
            }
          });
          setSelectedAttributes(defaultAttributes);
        }
        console.log("Found product:", foundProduct);
        console.log("Product images:", foundProduct.images);
        setProduct(foundProduct);
        setSelectedImage(foundProduct.images[0]);
      } else {
        // 如果找不到商品，重定向到商店页面
        navigate('/shop');
        toast.error(t('productNotFound'));
      }
      setIsLoading(false);
    }, 500);

    return () => clearTimeout(timer);
  }, [id, navigate, t]);

  const { addToCart } = useCart();
  
  const handleAddToCart = () => {
    if (product) {
      addToCart({
                     id: product.id,
                     nameKey: product.nameKey,
                     price: getAdjustedPrice(),
                     image: product.image,
                     quantity,
                     selectedAttributes
                   });
    }
  };

  const incrementQuantity = () => {
    setQuantity(prev => prev + 1);
  };

  const decrementQuantity = () => {
    if (quantity > 1) {
      setQuantity(prev => prev - 1);
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="flex flex-col items-center">
          <div className="w-16 h-16 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin"></div>
          <p className="mt-4 text-gray-600">{t('loading')}</p>
        </div>
      </div>
    );
  }

  if (!product) return null;

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
       <main className="flex-grow mt-12">
        <div className="container mx-auto px-4 py-8">


          {/* 商品详情内容 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* 商品图片区域 */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
            >
              {/* 主图片 */}
              <div className="bg-white rounded-xl overflow-hidden shadow-md mb-4 aspect-square relative">
                <img
                  src={selectedImage || product.image}
                  alt={t(product.nameKey)}
                  className="w-full h-full object-cover"
                />
                <div className="absolute top-4 right-4 bg-white/80 backdrop-blur-sm rounded-full p-2 shadow-sm">
                  <button aria-label={t('zoomImage')} className="text-gray-700 hover:text-blue-600">
                    <i className="fa-solid fa-search-plus"></i>
                  </button>
                </div>
              </div>

              {/* 缩略图 */}
              <div className="grid grid-cols-4 gap-3">
                {product.images.map((image: string, index: number) => (
                  <button
                    key={index}
                    onClick={() => setSelectedImage(image)}
                    className={`rounded-lg overflow-hidden aspect-square ${
                      selectedImage === image ? 'ring-2 ring-blue-600' : 'opacity-70 hover:opacity-100'
                    } transition-all`}
                    aria-label={`View image ${index + 1}`}
                  >
                    <img
                      src={image}
                      alt={`${t(product.nameKey)} view ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </button>
                ))}
              </div>
            </motion.div>

            {/* 商品信息区域 */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              {/* 分类和评分 */}
              <div className="flex justify-between items-start mb-4">
                <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
                  {t(product.categoryKey)}
                </span>
                <div className="flex items-center">
                  <div className="text-yellow-400 flex">
                    {[...Array(5)].map((_, i) => (
                      <i
                        key={i}
                        className={`fa-solid ${i < Math.floor(product.rating) ? 'fa-star' : 'fa-star-half-o'}`}
                      ></i>
                    ))}
                  </div>
                  <span className="text-sm text-gray-600 ml-2">
                    ({product.reviewCount})
                  </span>
                </div>
              </div>

              {/* 商品名称 */}
              <h1 className="text-3xl font-bold text-gray-900 mb-4">
                {t(product.nameKey)}
              </h1>

               {/* 价格 */}
               <div className="mb-6">
                 {product.attributes && product.attributes.length > 0 && Object.keys(selectedAttributes).length > 0 && getAdjustedPrice() !== product.price ? (
                   <div className="flex items-center mb-1">
                     <span className="text-lg text-gray-500 line-through">${product.price.toFixed(2)}</span>
                     <span className="ml-2 text-sm bg-red-100 text-red-800 px-2 py-0.5 rounded">
                       {getAdjustedPrice() < product.price ? '-' : '+'}${Math.abs(getAdjustedPrice() - product.price).toFixed(2)}
                     </span>
                   </div>
                 ) : null}
                 <div className="text-2xl font-bold text-blue-800">
                   ${getAdjustedPrice().toFixed(2)}
                 </div>
               </div>

                {/* 属性选择 */}


              {/* 特性列表 */}
              <div className="mb-8">
                <h2 className="text-lg font-semibold text-gray-900 mb-3">{t('features')}</h2>
                <ul className="space-y-2">
                  {product.features.map((feature: { key: string; valueKey: string }, index: number) => (
                    <li key={index} className="flex items-start">
                      <i className="fa-solid fa-check text-blue-600 mt-1 mr-2"></i>
                      <span className="text-gray-700">{t(feature.key)}: {t(feature.valueKey)}</span>
                    </li>
                  ))}
                </ul>
              </div>

               {/* 属性选择 */}
               {product.attributes && product.attributes.length > 0 && (
                 <div className="mb-8">
                    <h2 className="text-lg font-semibold text-gray-900 mb-4">规格</h2>
                   {product.attributes.map((attributeGroup: any, groupIndex: number) => (
                     <div key={groupIndex} className="mb-6">
                       <h3 className="text-sm font-medium text-gray-700 mb-3">{t(attributeGroup.nameKey)}</h3>
                       <div className="flex flex-wrap gap-3">
                         {attributeGroup.options.map((option: any, optionIndex: number) => (
                           <motion.button
                             key={optionIndex}
                             onClick={() => {
                               const newSelectedAttributes = {...selectedAttributes};
                               newSelectedAttributes[attributeGroup.nameKey] = option.value;
                               setSelectedAttributes(newSelectedAttributes);
                             }}
                             whileHover={{ scale: 1.05 }}
                             whileTap={{ scale: 0.98 }}
                             className={`px-4 py-2 rounded-lg text-sm transition-all ${
                               selectedAttributes[attributeGroup.nameKey] === option.value
                                 ? 'bg-blue-600 text-white shadow-md'
                                 : 'bg-white border border-gray-300 text-gray-700 hover:border-blue-400'
                             }`}
                           >
                             <span>{t(option.nameKey)}</span>
                             {option.priceAdjustment !== 0 && (
                               <span className={`ml-1 ${option.priceAdjustment > 0 ? 'text-green-600' : 'text-red-600'}`}>
                                 {option.priceAdjustment > 0 ? '+' : ''}{option.priceAdjustment}$
                               </span>
                             )}
                           </motion.button>
                         ))}
                       </div>
                     </div>
                   ))}
                 </div>
               )}

               {/* 属性选择 */}


               {/* 数量选择 */}
               <div className="mb-8">                  
                 <h2 className="text-lg font-semibold text-gray-900 mb-3">{t('quantity')}</h2>
                 <div className="flex items-center">
                   <button
                     onClick={decrementQuantity}
                     className="bg-gray-100 hover:bg-gray-200 text-gray-700 w-10 h-10 rounded-l-lg flex items-center justify-center transition-colors"
                     aria-label={t('decreaseQuantity')}
                   >
                     <i className="fa-solid fa-minus"></i>
                   </button>
                   <div className="w-16 h-10 bg-gray-50 border-t border-b flex items-center justify-center text-gray-900">
                     {quantity}
                   </div>
                   <button
                     onClick={incrementQuantity}
                     className="bg-gray-100 hover:bg-gray-200 text-gray-700 w-10 h-10 rounded-r-lg flex items-center justify-center transition-colors"
                     aria-label={t('increaseQuantity')}
                   >
                     <i className="fa-solid fa-plus"></i>
                   </button>
                 </div>
               </div>

              {/* 操作按钮 */}
              <div className="flex flex-col sm:flex-row gap-4">
                <button
                  onClick={handleAddToCart}
                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl flex items-center justify-center"
                >
                  <i className="fa-solid fa-shopping-cart mr-2"></i>
                  {t('addToCart')}
                </button>
                <button
                  className="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium py-3 px-6 rounded-lg transition-colors flex items-center justify-center"
                  aria-label={t('wishlist')}
                >
                  <i className="fa-regular fa-heart"></i>
                </button>
              </div>

              {/* 配送信息 */}
              <div className="mt-8 pt-8 border-t border-gray-200">
                <div className="flex items-start space-x-4">
                  <div className="bg-blue-50 p-2 rounded-full text-blue-600">
                    <i className="fa-solid fa-truck"></i>
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-1">{t('freeShipping')}</h3>
                    <p className="text-sm text-gray-600">{t('freeShippingDesc')}</p>
                  </div>
                </div>
               </div>
             </motion.div>
           </div>

           {/* 规格参数区域 - 移到详情最上方 */}


           {/* 附加信息标签页 */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              <div className="bg-white rounded-xl shadow-md overflow-hidden">
                <div className="border-b border-gray-200">
                  <div className="flex flex-wrap">
                    <button 
                      onClick={() => setActiveTab('description')}
                      className={`px-6 py-4 font-medium transition-colors ${
                        activeTab === 'description' 
                          ? 'text-blue-600 border-b-2 border-blue-600' 
                          : 'text-gray-500 hover:text-gray-700'
                      }`}
                    >
                      {t('description')}
                    </button>
                    <button 
                      onClick={() => setActiveTab('reviews')}
                      className={`px-6 py-4 font-medium transition-colors ${
                        activeTab === 'reviews' 
                          ? 'text-blue-600 border-b-2 border-blue-600' 
                          : 'text-gray-500 hover:text-gray-700'
                      }`}
                    >
                      {t('reviews')} ({product.reviewCount})
                    </button>
                  </div>
                </div>
                <div className="p-6">
                  {activeTab === 'description' && (
                         <div className="prose prose-gray max-w-none">
                           <h3 className="text-xl font-semibold text-gray-900 mb-4">{t('description')}</h3>
                           
                           {/* 参数规格表格 - 移到最上方 */}  
                           <h4 className="text-lg font-semibold text-gray-900 mb-4">产品规格参数</h4> 
                           <div className="overflow-x-auto mb-8">  
                             <table className="min-w-full border border-gray-200 rounded-lg">  
                               <thead className="bg-gray-50">  
                                 <tr>  
                                   <th className="py-3 px-4 border-b text-left text-sm font-medium text-gray-700">参数名称</th>  
                                   <th className="py-3 px-4 border-b text-left text-sm font-medium text-gray-700">参数值</th>  
                                 </tr>  
                               </thead>  
                               <tbody className="bg-white divide-y divide-gray-200">  
                                 {product.features.map((feature: any, index: number) => (  
                                   <tr key={index} className={index %2 === 0 ? 'bg-gray-50' : ''}>  
                                     <td className="py-3 px-4 border-b text-sm text-gray-700">{t(feature.key)}</td>  
                                     <td className="py-3 px-4 border-b text-sm font-medium text-gray-900">{t(feature.valueKey)}</td>  
                                   </tr>  
                                 ))}  
                               </tbody>  
                             </table>  
                           </div>
                           
                           {/* 产品描述文本 */}
                           <p className="mb-6">{t(product.descriptionKey)}</p> 
                           
                           {/* 产品详情图 */}
                           <div className="my-8 space-y-6">  
                             <img 
                               src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Stainless%20Steel%20Screwdriver%20Set%20Professional%20Quality&sign=0e87e0f94c6a21dbe55994acf814c502" 
                               alt="Product detail image" 
                               className="w-full h-auto rounded-lg shadow-sm"
                             />
                             <img 
                               src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_4_3&prompt=Magnetic%20Screwdriver%20Tips%20Closeup&sign=0ee71d11f4b8ad187b13f2b7aad463c2" 
                               alt="Product detail image" 
                               className="w-full h-auto rounded-lg shadow-sm"
                             /> 
                           </div>
                           
                           <p className="mb-4">{t(product.detailedDescriptionKey)}</p>
                           
                           {/* 产品特点 */}
                           <h4 className="text-lg font-semibold text-gray-900 mt-8 mb-4">产品特点与优势</h4>
                           <ul className="space-y-3 mb-8">  
                             <li className="flex items-start">  
                               <i className="fa-solid fa-check-circle text-green-600 mt-1 mr-3"></i>  
                               <span>采用高强度铬钒钢材质，硬度高，耐磨性强，使用寿命长</span>  
                             </li>  
                             <li className="flex items-start">  
                               <i className="fa-solid fa-check-circle text-green-600 mt-1 mr-3"></i>  
                               <span>精密加工工艺，确保螺丝刀头部准确匹配螺丝规格，避免滑丝</span>  
                             </li>  
                             <li className="flex items-start">  
                               <i className="fa-solid fa-check-circle text-green-600 mt-1 mr-3"></i>  
                               <span>人体工学手柄设计，握感舒适，长时间使用不易疲劳</span>  
                             </li>  
                             <li className="flex items-start">  
                               <i className="fa-solid fa-check-circle text-green-600 mt-1 mr-3"></i>  
                               <span>强磁性刀头，轻松吸附螺丝，提高工作效率</span>  
                             </li>  
                           </ul>
                           
                           {/* 使用场景 */}
                           <h4 className="text-lg font-semibold text-gray-900 mt-8 mb-4">适用场景</h4>
                           <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                             <div className="bg-gray-50 p-4 rounded-lg text-center">
                               <i className="fa-solid fa-home text-blue-600 text-2xl mb-2"></i>
                               <p className="text-sm">家庭维修</p>
                             </div>
                             <div className="bg-gray-50 p-4 rounded-lg text-center">
                               <i className="fa-solid fa-building text-blue-600 text-2xl mb-2"></i>
                               <p className="text-sm">工程安装</p>
                             </div>
                             <div className="bg-gray-50 p-4 rounded-lg text-center">
                               <i className="fa-solid fa-industry text-blue-600 text-2xl mb-2"></i>
                               <p className="text-sm">工业制造</p>
                             </div>
                             <div className="bg-gray-50 p-4 rounded-lg text-center">
                               <i className="fa-solid fa-graduation-cap text-blue-600 text-2xl mb-2"></i>
                               <p className="text-sm">专业维修</p>
                             </div>
                           </div>
                         </div>
                      )}
                  

                  
                   {activeTab === 'reviews' && (
                     <div>
                       <h3 className="text-xl font-semibold text-gray-900 mb-6">{t('reviews')} ({product.reviewCount})</h3>
                       
                       {/* 评分概览 */}
                       <div className="flex flex-col md:flex-row gap-8 mb-10">
                         <div className="flex flex-col items-center justify-center p-6 bg-gray-50 rounded-xl">
                           <span className="text-4xl font-bold text-gray-900">{product.rating.toFixed(1)}</span>
                           <div className="text-yellow-400 flex mt-2">
                             {[...Array(5)].map((_, i) => (
                               <i key={i} className={`fa-solid ${i < Math.floor(product.rating) ? 'fa-star' : i < product.rating ? 'fa-star-half-o' : 'fa-star-o'}`}></i>
                             ))}
                           </div>
                           <span className="text-sm text-gray-500 mt-2">{product.reviewCount} 条评价</span>
                         </div>
                         
                         <div className="flex-grow">
                           {[5, 4, 3, 2, 1].map(star => (
                             <div key={star} className="flex items-center mb-2">
                               <div className="flex items-center w-16">
                                 <span className="text-sm text-gray-600">{star}星</span>
                               </div>
                               <div className="flex-grow bg-gray-200 rounded-full h-2 mr-4">
                                 <div 
                                   className="bg-yellow-400 h-2 rounded-full" 
                                   style={{ width: `${Math.floor(Math.random() * 30) + 50}%` }}
                                 ></div>
                               </div>
                               <span className="text-sm text-gray-500 w-8 text-right">
                                 {Math.floor(Math.random() * 30) + 20}%
                               </span>
                             </div>
                           ))}
                         </div>
                       </div>
                       
                       {/* 评价列表 */}
                       <div className="space-y-6">
                         {/* 虚拟评价 1 */}
                         <div className="p-6 bg-gray-50 rounded-xl">
                           <div className="flex justify-between items-start mb-4">
                             <div className="flex items-center">
                               <img 
                                 src="https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Customer%20avatar&sign=3db6f2f66e0bb56b3df9c7090dbd3427" 
                                 alt="用户头像"
                                 className="w-12 h-12 rounded-full object-cover mr-4"
                               />
                               <div>
                                 <h4 className="font-medium text-gray-900">王小明</h4>
                                 <p className="text-sm text-gray-500">2025-08-15</p>
                               </div>
                             </div>
                             <div className="text-yellow-400">
                               {[...Array(5)].map((_, i) => (
                                 <i key={i} className="fa-solid fa-star"></i>
                               ))}
                             </div>
                           </div>
                           <p className="text-gray-700">这套螺丝刀非常好用，磁性很强，手柄握感舒适，套装里的规格也很齐全，家里日常维修完全够用了。材质看起来很耐用，性价比很高！</p>
                         </div>
                         
                         {/* 虚拟评价 2 */}
                         <div className="p-6 bg-gray-50 rounded-xl">
                           <div className="flex justify-between items-start mb-4">
                             <div className="flex items-center">
                               <img 
                                 src="https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Customer%20avatar&sign=3db6f2f66e0bb56b3df9c7090dbd3427" 
                                 alt="用户头像"
                                 className="w-12 h-12 rounded-full object-cover mr-4"
                               />
                               <div>
                                 <h4 className="font-medium text-gray-900">李小华</h4>
                                 <p className="text-sm text-gray-500">2025-08-10</p>
                               </div>
                             </div>
                             <div className="text-yellow-400">
                               {[...Array(4)].map((_, i) => (
                                 <i key={i} className="fa-solid fa-star"></i>
                               ))}
                               <i className="fa-solid fa-star-o"></i>
                             </div>
                           </div>
                           <p className="text-gray-700">作为一名专业电工，我对工具的要求比较高。这套螺丝刀套装做工精细，磁性适中，使用起来很顺手。唯一的小缺点是手柄略细，如果手大的人可能会觉得握感一般。总体来说值得推荐！</p>
                         </div>
                         
                         {/* 虚拟评价 3 */}
                         <div className="p-6 bg-gray-50 rounded-xl">
                           <div className="flex justify-between items-start mb-4">
                             <div className="flex items-center">
                               <img 
                                 src="https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=Customer%20avatar&sign=3db6f2f66e0bb56b3df9c7090dbd3427" 
                                 alt="用户头像"
                                 className="w-12 h-12 rounded-full object-cover mr-4"
                               />
                               <div>
                                 <h4 className="font-medium text-gray-900">张伟</h4>
                                 <p className="text-sm text-gray-500">2025-08-05</p>
                               </div>
                             </div>
                             <div className="text-yellow-400">
                               {[...Array(5)].map((_, i) => (
                                 <i key={i} className="fa-solid fa-star"></i>
                               ))}
                             </div>
                           </div>
                           <p className="text-gray-700">非常满意的一次购物！包装精美，工具质量超出预期。特别是磁性刀头设计，大大提高了工作效率。价格也比实体店便宜不少，物流也很快。已经推荐给同事了，下次还会再来购买其他工具！</p>
                         </div>
                       </div>
                     </div>
                   )}
                </div>
              </div>
            </motion.div>

           {/* 相关商品推荐 */}
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.6 }}
             className="mt-16"
           >
             <h2 className="text-2xl font-bold text-gray-900 mb-6">{t('relatedProducts')}</h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
               {products
                 .filter(p => p.id !== product.id && p.categoryKey === product.categoryKey)
                 .slice(0, 4)
                 .map((relatedProduct, index) => (
                   <motion.div
                     key={relatedProduct.id}
                     whileHover={{ y: -5 }}
                     transition={{ duration: 0.3 }}
                     className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all"
                   >
                     <div className="aspect-square overflow-hidden">
                       <img
                         src={relatedProduct.image}
                         alt={t(relatedProduct.nameKey)}
                         className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                       />
                     </div>
                     <div className="p-4">
                       <h3 className="font-semibold text-gray-800 mb-1 line-clamp-1">{t(relatedProduct.nameKey)}</h3>
                       <div className="flex justify-between items-center">
                         <span className="text-blue-800 font-bold">${relatedProduct.price.toFixed(2)}</span>
                         <button
                           onClick={() => navigate(`/product/${relatedProduct.id}`)}
                           className="text-blue-600 hover:text-blue-800 text-sm"
                         >
                           {t('viewDetails')}
                         </button>
                       </div>
                     </div>
                   </motion.div>
                 ))}
             </div>
           </motion.div>
        </div>
      </main>
      <Footer />
    </div>
  );
}